<template>
  <div class="wap-container enWorkingService" id="container">
    <section class="top mt10 mr10 ml10 bgfff">
      <div class="pics-box" id="picList">
        <img class="imgs" v-bind:src="_getPath(item)" v-for="item in picPathList"  >
      </div>
      <div id="addPics">
        <div class="picItem" id="addPic">
          <form id="picForm">
            <input id="file" class="filePic"  type="file" name="file" accept="image/*" @change="addPic">
          </form>
          <p class="picDesc"><img src="~assets/images2/icon_xiaotu@2x.png">{{picPathList.length}}张</p>
        </div>
      </div>
    </section>
    <section class="desc rowflex">
      <div class="c666 mr15">描述</div>
      <textarea placeholder="请输入" v-model="endingState"></textarea>
    </section>

    <section class="bottom_bar cfff" v-show="!isSave" @click="saveWorkPic()">
      保存
    </section>
  </div>
</template>

<script>
    export default {
      name: "EnWorkingService",
      data() {
        return{
          itemInfo: {},
          form: '',
          picPathList: [],
          picIdList: [],
          isSave: false,
          qualityFileStore: '',
          endingState: '',
          serviceId: '',
        }
      },
      methods: {
        addPic: function () {
          let formData = new FormData()
          let tag = 'logo'
          formData.append("file", document.getElementById("file").files[0])
          console.log(formData)
          this.$http.post('/work/api/upload/' + tag, formData).then(res => {
              let picPath = res.data.data.path
              let picId = res.data.data.id
              this.picPathList.push(picPath)
              this.picIdList.push(picId)
              this.qualityFileStore = this.picIdList.join(';')
            }
          )
        },
        saveWorkPic: function (){
          let serviceId = this.$route.query.id
          this.$store.commit("updateServiceInfo",{serviceInfo: {serviceItemId: serviceId,picPath: this.picPathList, qualityFileStore: this.qualityFileStore, endingState: this.endingState}})
          this.$router.push({path: '/engineer/enWorkingCatalog/', query: {orderId: this.$route.query.orderId}})
        },
        chooseService: function (item) {
          console.log(item.isChoose)
          var o = item.id
          if (item.isChoose){
            item.isChoose = false
            this.chooseToll -= item.toll // 已选项目总金额
            this.newForm.remove(o)
          } else {
            item.isChoose = true
            this.chooseToll += item.toll
            this.newForm.push(o)
          }
          console.log(this.newForm)
        }
      },
      mounted(){
        this.serviceId = this.$route.query.id
        this.itemInfo = this.$route.query.serviceItem
        if (this.itemInfo.status === 3 || this.itemInfo.status === 4) {
          this.isSave = true
          if (this.itemInfo.qualityFileStore) {
            this.picPathList = this.itemInfo.qualityFileStore.split(';')
          }
          this.endingState = this.itemInfo.endingState
          return false
        }
        console.log(this.itemInfo)
        let serviceId = this.serviceId
        console.log(this.$store.state.serviceItem)
        if(this.$store.state.serviceItem.serviceInfo){
          if(this.$store.state.serviceItem.serviceInfo.serviceItemId === serviceId){
            this.picPathList = this.$store.state.serviceItem.serviceInfo.picPath
            this.endingState = this.$store.state.serviceItem.serviceInfo.endingState
            this.qualityFileStore = this.$store.state.serviceItem.serviceInfo.qualityFileStore
          }
        }
      },
    }
</script>

<style lang="less">
  .enWorkingService {
    font-size: 0.13rem;
    overflow-x: hidden;
    .top {
      position: relative;
    }
    .pics-box {
      width: 100%;
      height: 1.95rem;
      -webkit-border-radius: 0.05rem;
      -moz-border-radius: 0.05rem;
      border-radius: 0.05rem;
      overflow: hidden;
    }
    .picItem .filePic {
      position: absolute;
      bottom: 0.05rem;
      right: 0;
      border: 0;
      outline: 0;
      width: 0.44rem;
      height: 0.2rem;
      opacity: 0;
      z-index: 2;
    }
    .pics-box .imgs {
      width: 100%;
      height: auto;
    }
    .picDesc {
      position: absolute;
      font-size: 0.1rem;
      color: #fff;
      right: 0;
      bottom: 0.05rem;
      width: 0.44rem;
      height: 0.2rem;
      background-color: rgba(0, 0, 0, 0.3);
      -webkit-border-radius: 0.02rem;
      -moz-border-radius: 0.02rem;
      border-radius: 0.02rem;
      text-align: center;
    }
    .picDesc img {
      width: 0.12rem;
      margin-right: 0.05rem;
    }

    .desc {
      margin-left: 0.1rem;
      margin-top: 0.3rem;
      height: 0.27rem;
      line-height: 0.27rem;
    }

    .desc textarea {
      width: 2.75rem;
      height: 0.27rem;
      padding-left: 0.1rem;
      line-height: 0.27rem;
    }
    .bottom_bar {
      width: 100%;
      background: #42a3fd;
      line-height: 0.43rem;
      font-size: 0.15rem;
      text-align: center;
    }
  }
</style>
